<script setup lang="ts">
import { ref } from 'vue';
import { currentLocale, changeLocale, localeOptions } from '../locales';
// 无需手动导入组件，unplugin-vue-components 插件会自动导入

defineProps<{ msg: string }>();

const count = ref(0);
const visible = ref(false);
const activeTab = ref('1');
const inputValue = ref('');
const selectValue = ref('');
const dateValue = ref('');
const switchValue = ref(false);
const sliderValue = ref(50);
const options = [
  { value: '选项1', label: '选项1' },
  { value: '选项2', label: '选项2' },
  { value: '选项3', label: '选项3' },
];

const showModal = () => {
  visible.value = true;
};

const handleOk = () => {
  visible.value = false;
};

const handleCancel = () => {
  visible.value = false;
};

// 切换语言
const handleLocaleChange = (locale: string) => {
  changeLocale(locale as any);
};
</script>

<template>
  <div class="container">
    <h1>{{ msg }}</h1>

    <!-- 语言切换 -->
    <div class="language-switcher">
      <span>当前语言：{{ currentLocale === 'zh-CN' ? '简体中文' : 'English' }}</span>
      <div class="language-buttons">
        <a-button-group>
          <a-button
            v-for="item in localeOptions"
            :key="item.value"
            :type="currentLocale === item.value ? 'primary' : 'default'"
            @click="handleLocaleChange(item.value)"
          >
            {{ item.label }}
          </a-button>
        </a-button-group>
      </div>
    </div>

    <div class="component-section">
      <h2>Ant Design Vue 组件展示</h2>

      <div class="component-group">
        <h3>基础组件</h3>
        <div class="component-row">
          <a-button type="primary" @click="showModal"> 打开对话框 </a-button>
          <a-button>默认按钮</a-button>
          <a-button type="dashed"> 虚线按钮 </a-button>
          <a-button type="link"> 链接按钮 </a-button>
        </div>

        <div class="component-row">
          <a-input v-model:value="inputValue" style="width: 200px" />
          <a-select v-model:value="selectValue" style="width: 200px">
            <a-select-option v-for="option in options" :key="option.value" :value="option.value">
              {{ option.label }}
            </a-select-option>
          </a-select>
        </div>

        <div class="component-row">
          <a-switch v-model:checked="switchValue" />
          <a-slider v-model:value="sliderValue" style="width: 200px" />
        </div>

        <a-modal v-model:open="visible" title="Ant Design Vue 对话框" @ok="handleOk" @cancel="handleCancel">
          <p>这是一个 Ant Design Vue 的对话框内容</p>
        </a-modal>
      </div>

      <div class="component-group">
        <h3>数据展示</h3>
        <a-tabs v-model:active-key="activeTab">
          <a-tab-pane key="1" tab="标签页1"> 内容 1 </a-tab-pane>
          <a-tab-pane key="2" tab="标签页2"> 内容 2 </a-tab-pane>
          <a-tab-pane key="3" tab="标签页3"> 内容 3 </a-tab-pane>
        </a-tabs>
      </div>
    </div>

    <div class="component-section">
      <h2>Element Plus 组件展示</h2>

      <div class="component-group">
        <h3>基础组件</h3>
        <div class="component-row">
          <el-button type="primary"> 主要按钮 </el-button>
          <el-button>默认按钮</el-button>
          <el-button type="success"> 成功按钮 </el-button>
          <el-button type="warning"> 警告按钮 </el-button>
          <el-button type="danger"> 危险按钮 </el-button>
        </div>

        <div class="component-row">
          <el-input v-model="inputValue" style="width: 200px" />
          <el-select v-model="selectValue" style="width: 200px">
            <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>
        </div>

        <div class="component-row">
          <el-date-picker v-model="dateValue" type="date" style="width: 200px" />
          <el-switch v-model="switchValue" />
        </div>
      </div>

      <div class="component-group">
        <h3>数据展示</h3>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="标签页1" name="1"> 标签页1内容 </el-tab-pane>
          <el-tab-pane label="标签页2" name="2"> 标签页2内容 </el-tab-pane>
          <el-tab-pane label="标签页3" name="3"> 标签页3内容 </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <div class="card">
      <button type="button" @click="count++">count is {{ count }}</button>
      <p>
        Edit
        <code>components/HelloWorld.vue</code> to test HMR
      </p>
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.language-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
  gap: 10px;
}

.language-buttons {
  display: flex;
  gap: 10px;
}

.component-section {
  margin-bottom: 40px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fff;
}

.component-group {
  margin-bottom: 20px;
}

.component-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

h3 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #555;
}

.card {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.read-the-docs {
  color: #888;
  margin-top: 20px;
}
</style>
